import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { Form, Card, Table, Divider, Button, message } from 'antd';
import { getLocalStorage } from '../../utils/local_storage';
import SetXcxTmpMsgModal from '../../components/SetXcxTmpMsgModal';
import SendXcxTmpMsgModal from '../../components/SendXcxTmpMsgModal';
import styles from './style.less';

@connect(({ xcx_template_message, loading }) => ({
  xcx_template_message,
  loading: loading.models.xcx_template_message,
}))
@Form.create()
export default class TemplateMessage extends PureComponent {
  state = {
    setTmpModalVisible: false,
    sendTmpMsgModalVisible: false,
    addGHVisible: false,
    editGHVisible: false,
    template_list: [],
    tmpMsg: [],
    appid: '',
  };

  // 加载页面后拉取公众号列表
  componentDidMount() {
    this.props.dispatch({
      type: 'xcx_template_message/fetchXcxList',
    });
  }

  // 设置模板消息列表参数
  componentWillReceiveProps() {
    const { tmpList } = this.props.xcx_template_message;
    this.setState({
      template_list: tmpList,
    });
  }

  // 配置模板处理
  showSetTemplateModal = (appid) => {
    // 通过公众号id查询该公众号模板列表
    this.props.dispatch({
      type: 'xcx_template_message/fetchXcxTmpList',
      payload: appid,
    });
    // 设置配置模板modal可见
    this.setState({
      appid: appid,
      setTmpModalVisible: true,
    });
  };
  // 处理模板消息配置成功回调
  handleSetTmpContentOk = () => {
    // 设置modal不可见
    this.setState({
      setTmpModalVisible: false,
    });
    // 判断localstorage是否保存成功
    if (getLocalStorage(this.state.appid)) {
      message.success('保存成功');
    }
  };
  // 处理模板消息配置取消回调(设置modal不可见)
  handleSetTmpContentCancel = () => {
    this.setState({
      setTmpModalVisible: false,
    });
  };

  // 发送模块处理
  showSendTmpMsgModal = appid => {
    // 发送时获取xcxid和模板消息内容
    const tmpMsgText = getLocalStorage(appid);
    if (tmpMsgText) {
      const tmpMsg = JSON.parse(tmpMsgText);
      this.setState({
        tmpMsg: tmpMsg,
        appid: appid,
        sendTmpMsgModalVisible: true,
      });
    } else {
      message.warning('请先设置模版消息内容');
    }
  };
  // 处理发送模块成功回调
  handleSendTmpMsgOk = v => {
    const { tmpMsg, appid } = this.state;
    const { send_type, test_openid, send_date } = v;
    this.props.dispatch({
      type: 'xcx_template_message/createSchedule',
      payload: {
        appid: appid,
        tmpMsg: JSON.stringify(tmpMsg),
        send_type: send_type,
        test_openid: test_openid ? test_openid : '',
        send_date: send_date ? moment(send_date).unix() : '',
      },
    });
    // 设置modal不可见
    this.setState({
      sendTmpMsgModalVisible: false,
    });
  };
  // 处理发送模块取消回调(设置modal不可见)
  handleSendTmpMsgCancel = () => {
    this.setState({
      sendTmpMsgModalVisible: false,
    });
  };

  render() {
    const {
      setTmpModalVisible,
      sendTmpMsgModalVisible,
      tmpMsg,
      appid,
      template_list,
    } = this.state;
    const {
      xcx_template_message: { xcxList },
      loading,
    } = this.props;

    const btnSet = {
      size: 'small',
      type: 'primary',
    };

    const columns = [
      {
        title: 'Id',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '小程序账号',
        dataIndex: 'ghid',
        key: 'ghid',
      },
      {
        title: '小程序名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'AppId',
        dataIndex: 'appid',
        key: 'appid',
      },
      {
        title: '模板消息操作',
        dataIndex: 'tmp_operation',
        key: 'tmp_operation',
        render: (text, record) => (
          <Fragment>
            <Button {...btnSet} onClick={() => this.showSetTemplateModal(record.appid)}>
              配置模板
            </Button>
            <Divider type="vertical" />
            <Button {...btnSet} onClick={() => this.showSendTmpMsgModal(record.appid)}>
              发送
            </Button>
          </Fragment>
        ),
      },
    ];

    return (
      <div>
        <Card style={{ marginTop: 40 }} bordered={false}>
          <div>
            <Table
              rowKey="appid"
              loading={loading}
              dataSource={xcxList}
              bordered
              columns={columns}
            />
          </div>
        </Card>
        <SetXcxTmpMsgModal
          visible={setTmpModalVisible}
          appid={appid}
          onOk={this.handleSetTmpContentOk}
          onCancel={this.handleSetTmpContentCancel}
          templateList={template_list}
        />
        <SendXcxTmpMsgModal
          visible={sendTmpMsgModalVisible}
          onOk={this.handleSendTmpMsgOk}
          onCancel={this.handleSendTmpMsgCancel}
          tmpMsg={tmpMsg}
        />
      </div>
    );
  }
}
